// 屏幕高度
@SCREEN_HEIGHT : 23.40rem*1.4;
//屏幕宽度
@SCREEN_WIDTH : 10.80rem*1.4;
// 屏幕上边距
@MARGIN_TOP : 0.60em;
//屏幕下边距
@MARGIN_BOTTOM : @MARGIN_TOP*1.5;
// 屏幕左右边距
@MARGIN_LR : @MARGIN_TOP/1.5;
//手机弧度
@PHONE_RADIUS : 1.5em;
//屏幕弧度
@SCREEN_RADIUS : 1em;
//内容的左右边距
@MARGIN_SCREEN_LR : .5rem;

//top的高度
@TOP_H: @SCREEN_HEIGHT/30*1.2;
// setting的高度
@SETTING_H: @SCREEN_HEIGHT/30*2;
//function的高度
@FUNCTION_H: @SCREEN_HEIGHT/30*2;
//progress的高度
@PROGRESS_H: @SCREEN_HEIGHT/30*2.5;
//result的高度
@RESULT_H: @SCREEN_HEIGHT/30*2.5;
// 白条的高度
@BAR_H: @SCREEN_HEIGHT/30*0.68;
//普通模式下keyboard的高度
@KEYBOARD_H_COMMON: @SCREEN_HEIGHT/30*14;
//科学模式下keyboard的高度
@KEYBOARD_H_SCI: @SCREEN_HEIGHT/30*15;
//普通模式下功能和下面之间的高度
@SPACE_H_COMMON: @SCREEN_HEIGHT - @TOP_H - @SETTING_H  - @FUNCTION_H - @PROGRESS_H - @RESULT_H - @KEYBOARD_H_COMMON
     - @BAR_H;
//科学模式下功能和下面之间的高度
@SPACE_H_SCI: @SCREEN_HEIGHT - @TOP_H - @SETTING_H  - @FUNCTION_H - @PROGRESS_H - @RESULT_H - @KEYBOARD_H_SCI 
    - @BAR_H;
//计算的数字大小
@CALC_LARGE: 2rem;
@CALC_SMALL: 1.5rem;

//按键的高度
@KEY_H_COMMON: @KEYBOARD_H_COMMON/5;
@KEY_H_SCI: @KEYBOARD_H_SCI/7;

// 键的字体大小
@KEY_FONT_SIZE: 1.3rem;
@FONT_HALF: @KEY_FONT_SIZE/2;
@FONT_TRI: @KEY_FONT_SIZE/3;

#phone{
    width: @SCREEN_WIDTH+2*@MARGIN_LR;
    height: @SCREEN_HEIGHT+@MARGIN_BOTTOM+@MARGIN_TOP;
    background-color: black;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    border-radius: @PHONE_RADIUS;
    box-shadow: .2em .1em .8em 0em gray;

    .screen{
        width: @SCREEN_WIDTH;
        height: @SCREEN_HEIGHT;
        margin: @MARGIN_TOP @MARGIN_LR @MARGIN_BOTTOM @MARGIN_LR;
        background-color: white;
        border-radius: @SCREEN_RADIUS;
        position: relative;
        overflow: hidden;
        .top{
            height: @TOP_H;
            line-height: @TOP_H;
            // vertical-align: baseline;
            display: flex;
            justify-content: space-between;
            font-size: .6em;
            font-weight: bold;
            // border-bottom: solid 2px black;

            .left{
                margin-left: @MARGIN_SCREEN_LR;
            }

            .right{
                margin-right: @MARGIN_SCREEN_LR;
                font-size: 1.5em;
            }
        }

        .setting{
            height: @SETTING_H;
            line-height: @SETTING_H;
            // border-bottom: solid 2px black;


            &::before,
            &::after{
                content: "";
                display: block;
                clear: both;
            }
            
            .setting-icon{
                // padding-top: .5em;
                // padding-bottom: .5em;
                font-size: 1.2em;
                width: 1em;
                float: right;
                margin-right: @MARGIN_SCREEN_LR;
            }
        }

        .function{
            height: @FUNCTION_H;
            line-height: @FUNCTION_H;
            
            // margin-bottom: 3em;
            // border-bottom: solid 2px black;


            .fun{
                    margin-left: @MARGIN_SCREEN_LR;

                span{
                    font-size: 1.2em;
                    color: gray;
                }

                .fun-active{
                    color: black;
                }
            }
        }

        .space-padding-common{
            height: @SPACE_H_COMMON;
            // height: @SPACE_H_SCI;
            opacity: 1;
        }

        .space-padding-sci{
            height: @SPACE_H_SCI;
            opacity: 1;
        }

        .calc-small{
            font-size: @CALC_SMALL;
            color: gray;
        }
        
        .calc-large{
            font-size: @CALC_LARGE;
            color: black
        }

        .progress{
            height: @PROGRESS_H;
            // background-color: aquamarine;
        }
        .result{
            height: @RESULT_H;
            // background-color: brown;
        }

        .calc-wrapper{
            height: @PROGRESS_H;
            line-height: @PROGRESS_H;
            margin-right: @MARGIN_SCREEN_LR;
            text-align: right;
        }

        .key-board{
            height: @KEYBOARD_H_COMMON;
            background-color: greenyellow;

            .not-show{
                display: none;
            }

            div{
                .row-li{
                    // display: flex
                    width: 100%;
                    // 将父元素的字体设置为0,使button子元素之间不会有空隙
                    font-size: 0;
                    margin: 0 0;
                    border: none;
                    outline: 0;
                
                }
                .color-key{
                    color: #FF7433;
                    fill: #FF7433;
                }

              

                .common{
                    // display: none;

                    .key-btn{
                        // width: 1;
                        margin: 0 0;
                        border: none;
                        // box-sizing: content-box;
                        height: @KEY_H_COMMON;
                        // flex-grow: 1;
                        width: 25%;
                        background: white;
                        font: @KEY_FONT_SIZE bold;

                        &:focus{
                            outline: 0;
                        }
                        &:active{
                            background:lightgray;
                        }
                    }
                }

                .sci{

                    
                    .normal-font{
                        font-size: @KEY_FONT_SIZE;
                        font-weight: bold;
                        vertical-align: middle;
                    }


                    .half-font{
                        color: gray;
                        font-size:  @FONT_HALF;
                        vertical-align: middle;

                    }
                    
                    .half-font-larger{
                        color: gray;
                        font-size:  @FONT_HALF*1.2;
                        vertical-align: middle;
                    }

                    .tri-font{
                        color: gray;
                        font-size:  @FONT_TRI;
                        vertical-align: middle;

                    }


                    .key-btn{
                        // width: 1;
                        margin: 0 0;
                        border: none;
                        // box-sizing: content-box;
                        height: @KEY_H_SCI;
                        // flex-grow: 1;
                        width: 20%;
                        padding: 0 0;
                        background: white;
                        // font: bold;

                        &:focus{
                            outline: 0;
                        }
                        &:active{
                            background:lightgray;
                        }
                    }

                }
                
            }
        }

        .bottom{
            position: absolute;
            bottom: 0;
            height: @BAR_H;
            width: 100%;

            .android-bar{
                width: 50%;
                height: 3px;
                border-radius: .15em;
                background-color: black;
                margin: 0 auto;
            }
        }
    }
}